<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>每日励志</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-image: url('./shuai.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    .status-bar {
      height: 44px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background-color: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .home-indicator {
      height: 5px;
      width: 36%;
      background-color: #fff;
      border-radius: 3px;
      opacity: 0.8;
    }
    .quote-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 500px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .quote-container:active {
      transform: translate(-50%, -50%) scale(0.98);
    }
    .quote-card {
      background-color: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    .quote-text {
      line-height: 1.8;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      min-height: 80px;
    }
    .loading {
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #ffffff;
      animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <!-- iOS 状态栏 - 固定在顶部 -->
  <div class="status-bar flex items-center justify-between px-5 pt-2">
    <button onclick="window.location.href='projects.html'" class="mr-4 px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition text-sm">返回</button>
    <div class="text-sm font-semibold text-gray-800">9:41</div>
    <div class="flex space-x-1 text-gray-800">
      <i class="fas fa-signal"></i>
      <i class="fas fa-wifi"></i>
      <i class="fas fa-battery-full"></i>
    </div>
  </div>

  <!-- 励志短句卡片 -->
  <div class="quote-container" id="quoteContainer">
    <div class="quote-card rounded-2xl p-6">
      <div class="flex items-start mb-4">
        <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-white">
          <i class="fas fa-quote-left"></i>
        </div>
        <div class="ml-4">
          <h2 class="text-lg font-semibold text-white">今日励志</h2>
          <p class="text-xs text-white text-opacity-80">点击卡片刷新</p>
        </div>
      </div>

      <div class="quote-text text-white text-lg font-medium px-2 py-4" id="quoteText">
        <div class="flex justify-center items-center h-full">
          <div class="loading"></div>
        </div>
      </div>

      <div class="flex justify-end">
        <div class="text-white text-opacity-80 text-sm">
          <i class="fas fa-sync-alt mr-1"></i> 刷新
        </div>
      </div>
    </div>
  </div>

  <!-- iOS Home Indicator -->
  <div class="fixed bottom-0 left-0 right-0 flex justify-center py-2">
    <div class="home-indicator"></div>
  </div>

  <script>
    // 获取DOM元素
    const quoteContainer = document.getElementById('quoteContainer');
    const quoteText = document.getElementById('quoteText');

    // API地址
    const apiUrl = 'https://hmajax.itheima.net/api/ambition';

    // 显示加载状态
    function showLoading() {
      quoteText.innerHTML = `
        <div class="flex justify-center items-center h-full">
          <div class="loading"></div>
        </div>
      `;
    }

    // 显示错误信息
    function showError(message) {
      quoteText.innerHTML = `
        <p class="text-red-200">${message || '获取励志短句失败，请点击重试'}</p>
      `;
    }

    // 获取励志短句
    async function fetchQuote() {
      try {
        showLoading();

        const response = await fetch(apiUrl);
        if (!response.ok) {
          throw new Error('网络请求失败');
        }

        const result = await response.json();

        // 短暂延迟，让加载动画显示一会儿
        setTimeout(() => {
          quoteText.innerHTML = `
            <p class="fade-in">${result.data}</p>
          `;
        }, 500);

      } catch (error) {
        console.error('获取励志短句出错:', error);
        showError(error.message);
      }
    }

    // 添加点击事件
    quoteContainer.addEventListener('click', fetchQuote);

    // 页面加载时获取一条励志短句
    document.addEventListener('DOMContentLoaded', fetchQuote);
  </script>
</body>
</html>
